<template>
  <div id="shop">
    <!-- 头部 -->
    <div class="header">
      <div class="headerBox">
        <div class="headerContent">
          <img :src="apiUrl+'/'+shopImg" alt="">
          <div class="headerTxt">
            <h2>{{shopName}}</h2>
            <p class="headerp">
              <span>达达专送</span>
              <span>.{{shopTime}}分钟</span>
            </p>
            <p class="headerp">基础运费4元</p>
          </div>
        </div>
        <div class="headerIco">
          <i class="fa fa-heart-o"></i>
        </div>
      </div>
      <div class="yh">
        <el-collapse accordion>
          <el-collapse-item name="1">
            <template slot="title" class="yhTxt">
              <i class="fq">返券</i>实付满50元订单完成后返20元 ... <span class="yhq"> 10种优惠</span>
            </template>
              <div class="yhcontents">
                  <h3>店铺优惠券</h3>
                  <ul class="yhlist">
                      <li>
                          <div class="yh1">
                              <div>8.8折</div>
                              <div>满30~40元享折扣</div>
                          </div>
                          <div>领券</div>
                      </li>
                  </ul>
              </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="search">
          <div class="sframe">
              <p>
                  <i class="fa fa-search"></i>&nbsp;&nbsp;
                  <span>搜索店内商品，共2138件好物</span>
              </p>
          </div>
          <div class="simg">
            <img src="/static/groupCopy.png" alt="">
          </div>
      </div>
    </div>
      <!-- 主体 -->
      <div class="main">
        <!-- 主体左边 -->
        <div class="left">
          <ul>
              <li v-for="ctg in ctgs" :key="ctg.id" class="sort">
                  <p @click="ctg.display=!ctg.display" class="ctgm">{{ctg.ctgName}}</p>
                  <ul v-show="ctg.display" class="sorts">
                      <li v-for="chctg in ctg.children" :key="chctg.id" @click="getMerchants(chctg.id)" class="chctgm">{{chctg.ctgname}}</li>
                  </ul>
              </li>
          </ul>
        </div>
        <!-- 主体右边 -->
        <div class="right">
          <ul>
            <li v-for="merchant in merchants" class="mBox" :key="merchant.id">
              <router-link :to="{name:'merdetails'}">
                <div class="mImg">
                  <img :src="apiUrl+'/'+merchant.mImg" alt="">
              </div>
              </router-link>
              
              <div class="mTxt">
                <router-link :to="{name:'merdetails'}">
                  <h3>{{merchant.mName}}</h3>
                </router-link>
                  <p class="mSale">
                      <span>月售{{merchant.store}}件</span>&nbsp;&nbsp;
                      <span>好评{{merchant.judge}}%</span>
                  </p>
                  <p class="myh">满30减5</p>
                  <div class="mPrice">
                      <div class="twoPrice">
                          <p class="mPricep">￥{{merchant.price}}</p>
                          <del class="">￥{{merchant.oprice}}</del>
                      </div>
                      <div v-if="merchant.snum>0" class="reducebj">
                          <p class="redCount" @click="reduceCar({shopid:shopid,merchInfo:merchant})">-</p>
                          <p>{{merchant.snum}}</p>
                      </div>
                      <p class="mCount" @click="addCar({shopid:shopid,merchInfo:merchant})">+</p>
                  </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 脚部 -->
       <div>
        <Car :shopid="shopid"></Car>
      </div>
      <!-- 右侧导航 -->
      <rnav active="shop"></rnav>
  </div>
</template>
<script>
  import Car from "@/components/Car.vue";
  import rnav from "@/components/Rnav.vue";
  import {
    mapState,
    mapMutations,
    mapGetters
  } from "vuex";
  import store from "@/store/index.js";
  export default {
    props: ["shopid", "shopImg", "shopName", "shopTime"],
    components: {
      Car,
      rnav,
    },
    store,
    data() {
      return {
        ctgs: [],
        merchants: []
      };
    },
    created() {
      this.initCar(this.shopid);
      this.getShopCtg();
      this.getMerchants();
    },
    computed: {
      ...mapState(["car"])
    },
    methods: {
      getShopCtg() {
        this.axios.get("/shops/list").then(res => {
          if (res.data.error == 0) {
            this.ctgs = res.data.data1;
          }
        });
      },
      getMerchants() {
        this.axios.get("/merchant/list").then(res => {
          if (res.data.error == 0) {
            this.merchants = res.data.data2;
          }
        });
      },
      ...mapMutations(["initCar", "addCar", "reduceCar"])
    }
  };
 </script>

<style>
 * {
  box-sizing: border-box;
}
.yhcontents {
  height: auto;
  position: fixed;
  top: 8rem;
  bottom: 0;
  z-index: 300;
  background: white;
  overflow-y: auto;
}
.yhcontents h3 {
  width: 20rem;
  height: auto;
}
.yhlist {
  width: 19rem;
}
.yhlist li {
  margin-bottom: 1rem;
}
.yh1 {
  border: 1px solid red;
  border-left: 0.3rem solid red;
}
ul {
  list-style-type: none;
} 
/*头部样式*/
 .header {
  height: 10.8rem;
  width: 100%;
}
.headerBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.headerContent {
  display: flex;
  justify-content: space-between;
}
.headerBox img {
  width: 3.875rem;
  height: 3.875rem;
  border: 0.0625rem solid #ddd;
  background-color: white;
  border-radius: 1.5rem 0 1.5rem 0;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.headerTxt {
  line-height: 1.5rem;
  margin-left: 0.5rem;
}
.headerTxt h2 {
  font-size: 1rem;
  font-weight: 900;
}
.headerp {
  font-size: 0.75rem;
}
.headerIco {
  font-size: 1.5rem;
  margin-right: 1rem;
}
.yh {
  width: 100%;
  height: auto;
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin: 0.3rem 0;
} 
 .fq {
  background-color: rgb(245, 134, 7);
  color: white;
}
.yhTxt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 78%;
}
.yhq i {
  font-size: 1rem;
}
.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}
.sframe {
  width: 82%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5rem;
  color: #999;
  font-size: 0.9rem;
}
.simg img {
  width: 2.9375rem;
  height: 1.875rem;
  margin-top: 0.2rem;
} 
/*主体样式*/
 .main {
  display: flex;
  height: 24rem;
}
.left {
  width: 5rem;
  height: 100%;
  overflow: auto;
} 
 .sort {
  width: 5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  background-color: #f8f8f8;
}
.sort p {
  width: 4rem;
  height: 3rem;
  line-height: 3rem;
  margin: 0 auto;
}
.sorts {
  padding-left: 1.3rem;
  list-style-type: disc;
}
.ctgm:hover {
  font-weight: 900;
  color: black;
}
sort:hover {
  background-color: white;
}
.chctgm:hover {
  color: rgb(82, 160, 4);
}
.sorts li {
  width: 3.5rem;
  font-size: 0.625rem;
  margin-bottom: 0.5rem;
}
.right {
  width: 15rem;
  height: 100%;
  overflow-y: auto;
}
.mBox {
  display: flex;
  height: 9.3rem;
  margin-top: 0.5rem;
}
.mImg {
  padding: 0 0.3rem;
}
.mImg img {
  width: 4.06rem;
  height: 4.06rem;
}
.mTxt {
  line-height: 2rem;
}
.mTxt a{
  text-decoration: none;
  color:#333;
}
.mTxt h3 {
  font-size: 1rem;
  font-weight: 700;
}
.mSale {
  font-size: 0.75rem;
}
.myh {
  width: 3.5rem;
  padding-left: 0.3rem;
  line-height: 1rem;
  font-size: 0.75rem;
  background-color: #27be6b;
  border-radius: 0.3rem;
  color: white;
}
.mPrice {
  width: 9.8rem;
  display: flex;
  justify-content: space-between;
}
.mPrice del {
  font-size: 0.7rem;
  color: #999;
}
.mPricep {
  font-size: 1rem;
  color: red;
}
.twoPrice {
  line-height: 1.2rem;
}
.mCount {
  width: 1.75rem;
  height: 1.75rem;
  background-color: #00ca3e;
  border-radius: 1.75rem;
  color: white;
  line-height: 1.5rem;
  text-align: center;
  font-size: 1.6rem;
}
.redCount {
  width: 1.75rem;
  height: 1.75rem;
  border: 0.0625rem solid #00ca3e;
  border-radius: 1.75rem;
  color: #00ca3e;
  line-height: 1.5rem;
  text-align: center;
  font-size: 1.6rem;
}
.reducebj {
  display: flex;
  width: 3rem;
  justify-content: space-between;
} 
</style>
